html,
body {
margin: 0;
padding: 0;
width: 100%;
min-height: 100%;
background: #5a0903;
color: #ffffff;
}

body {
overflow-x: hidden;
}

/* =========================================================
TESTIMONIAL SECTION
========================================================= */

.feedback-container {
position: relative;
width: 100%;
min-height: 100vh;
margin-top: 60px;

display: grid;
grid-template-columns: repeat(3, minmax(260px, 1fr));

gap: 32px;

padding: 90px 5vw 100px;

box-sizing: border-box;

    background:
        radial-gradient(
            circle at 15% 15%,
            rgba(190, 141, 5, 0.2),
            transparent 28%
        ),
        radial-gradient(
            circle at 85% 55%,
            rgba(0, 0, 0, 0.07),
            transparent 25%
        ),
        linear-gradient(
            101deg,
            #4d0401 50%,
            #3f0202 50%,
            #860404 50%
        );
    color: #000000;

}

/* TESTIMONIALS PAGE HEADING */
.testimonials-heading {
    grid-column: 1 / -1;
    text-align: center;
    width: 100%;
    margin: 0 auto 10px;
    position: relative;
    z-index: 2;
}

.heading-label {
    display: inline-block;
    color: #d8b653;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 3px;
    margin-bottom: 14px;
}

.testimonials-heading h1 {
    color: #ffffff;
    font-size: clamp(30px, 4vw, 48px);
    font-weight: 800;
    line-height: 1.2;
    margin: 0 0 16px;
    text-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
}

.testimonials-heading p {
    color: #f0dfe0;
    font-size: clamp(14px, 1.5vw, 17px);
    line-height: 1.8;
    max-width: 650px;
    margin: 0 auto;
}

.heading-line {
    width: 85px;
    height: 3px;
    margin: 22px auto 0;
    border-radius: 5px;
    background: linear-gradient(90deg, #9b1c2d, #e4c56b);
}

/* =========================================================
TESTIMONIAL CARD
========================================================= */

.feedback-card {
position: relative;


min-height: 500px;

padding: 30px 26px;

box-sizing: border-box;

display: flex;
flex-direction: column;
align-items: center;

text-align: center;

overflow: hidden;

border-radius: 25px;

background:
    linear-gradient(
        145deg,
        rgba(48, 11, 10, 0.96),
        rgba(15, 8, 8, 0.98)
    );

border: 1px solid rgba(150, 35, 70, 0.35);

box-shadow:
    0 20px 55px rgba(0, 0, 0, 0.65),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);

transition:
    transform 0.35s ease,
    border-color 0.35s ease,
    box-shadow 0.35s ease;

z-index: 2;


}

/* =========================================================
CARD HOVER
========================================================= */

.feedback-card:hover {
transform: translateY(-10px);


border-color: rgba(190, 55, 90, 0.7);

box-shadow:
    0 28px 65px rgba(0, 0, 0, 0.75),
    0 0 30px rgba(120, 20, 20, 0.16);


}

/* =========================================================
CARD TOP GLOW
========================================================= */

.feedback-card::before {
content: "";


position: absolute;

top: 0;
left: 12%;
right: 12%;

height: 2px;

background: linear-gradient(
    90deg,
    transparent,
    rgba(180, 45, 85, 0.85),
    transparent
);

box-shadow:
    0 0 15px rgba(170, 35, 75, 0.55);

z-index: 1;

}

/* =========================================================
CARD INNER GLOW
========================================================= */

.feedback-card::after {
content: "";


position: absolute;

width: 180px;
height: 180px;

left: 50%;
top: -110px;

transform: translateX(-50%);

border-radius: 50%;

background: rgba(120, 20, 55, 0.08);

filter: blur(35px);

pointer-events: none;

}

/* =========================================================
STUDENT IMAGE
========================================================= */

.feedback-img {
position: relative;

width: 145px;
height: 145px;

margin-top: 8px;
margin-bottom: 20px;

object-fit: cover;

border-radius: 50%;

border: 4px solid #68152f;

background: #160910;

box-shadow:
    0 0 0 5px rgba(201, 142, 34, 0.12);

z-index: 3;

transition:
    transform 0.35s ease,
    border-color 0.35s ease;


}

.feedback-card:hover .feedback-img {
transform: scale(1.06);


border-color: #9b274d;


}

/* =========================================================
NAME
========================================================= */

.name {
position: relative;

margin-top: 2px;

color: #f7dce6;

font-size: clamp(22px, 2vw, 28px);

font-weight: 700;

line-height: 1.25;

letter-spacing: 0.3px;

text-shadow:
    0 0 14px rgba(180, 45, 85, 0.25);

z-index: 3;


}

/* =========================================================
AGE
========================================================= */

.age {
position: relative;


margin-top: 8px;
margin-bottom: 22px;

color: #aa944b;

font-size: 14px;

font-weight: 600;

letter-spacing: 1px;

text-transform: uppercase;

z-index: 3;


}

/* =========================================================
MESSAGE
========================================================= */

.message {
position: relative;


max-width: 440px;

color: #eadde2;

font-size: 16px;

line-height: 1.8;

font-weight: 400;

z-index: 3;


}

/* =========================================================
THANK YOU VISUAL
========================================================= */

.message::first-letter {
color: #ffffff;
}

.music-notes {
position: fixed;


inset: 0;

width: 100vw;
height: 100vh;

pointer-events: none;

overflow: hidden;

z-index: 1;


}

/* =========================================================
NOTE CONTAINER
========================================================= */

.note-container {
position: absolute;


inset: 0;

width: 100%;
height: 100%;


}

/* =========================================================
INDIVIDUAL NOTE
========================================================= */

.note {
position: absolute;

bottom: -80px;

display: block;

color: #7e1f3c;

font-family:
    "Segoe UI Symbol",
    "Noto Music",
    "Arial Unicode MS",
    sans-serif;

font-size: 34px;

font-weight: 400;

line-height: 1;

opacity: 0.55;

text-shadow:
    0 0 8px rgba(125, 106, 24, 0.45),
    0 0 20px rgba(100, 84, 15, 0.25);

animation-name: noteRise;

animation-timing-function: linear;

animation-iteration-count: infinite;

animation-fill-mode: both;

}

/* =========================================================
NOTE 1
========================================================= */

.note:nth-child(1) {
left: 5%;


font-size: 28px;

color: #735e1b;

opacity: 0.52;

animation-duration: 11s;
animation-delay: -2s;


}

/* =========================================================
NOTE 2
========================================================= */

.note:nth-child(2) {
left: 17%;


font-size: 46px;

color: #927e25;

opacity: 0.65;

animation-duration: 15s;
animation-delay: -8s;

}

/* =========================================================
NOTE 3
========================================================= */

.note:nth-child(3) {
left: 29%;


font-size: 25px;

color: #645216;

opacity: 0.48;

animation-duration: 12s;
animation-delay: -5s;


}

/* =========================================================
NOTE 4
========================================================= */

.note:nth-child(4) {
left: 41%;


font-size: 58px;

color: #a08e2b;

opacity: 0.58;

animation-duration: 18s;
animation-delay: -13s;


}

/* =========================================================
NOTE 5
========================================================= */

.note:nth-child(5) {
left: 53%;


font-size: 32px;

color: #7a5c1d;

opacity: 0.50;

animation-duration: 13s;
animation-delay: -7s;


}

/* =========================================================
NOTE 6
========================================================= */

.note:nth-child(6) {
left: 65%;


font-size: 49px;

color: #927925;

opacity: 0.63;

animation-duration: 16s;
animation-delay: -10s;


}

/* =========================================================
NOTE 7
========================================================= */

.note:nth-child(7) {
left: 76%;


font-size: 30px;

color: #685517;

opacity: 0.48;

animation-duration: 10s;
animation-delay: -4s;


}

/* =========================================================
NOTE 8
========================================================= */

.note:nth-child(8) {
left: 87%;


font-size: 54px;

color: #a3832b;

opacity: 0.60;

animation-duration: 17s;
animation-delay: -12s;


}

/* =========================================================
NOTE 9
========================================================= */

.note:nth-child(9) {
left: 95%;


font-size: 27px;

color: #751b39;

opacity: 0.50;

animation-duration: 14s;
animation-delay: -6s;


}

/* =========================================================
ONLY UPWARD MOTION
========================================================= */

@keyframes noteRise {


0% {
    transform: translateY(0);
    opacity: 0;
}

8% {
    opacity: 0.55;
}

50% {
    opacity: 0.65;
}

85% {
    opacity: 0.48;
}

100% {
    transform: translateY(-115vh);
    opacity: 0;
}


}

/* =========================================================
KEEP NOTES BEHIND CARDS
========================================================= */

.feedback-container .feedback-card {
z-index: 2;
}

/* =========================================================
EXTRA NOTE DENSITY
========================================================= */

/*
The original HTML has only 9 notes.
These pseudo-elements create additional
music symbols across the page without
requiring HTML changes.
*/

.feedback-container::before,
.feedback-container::after {
position: fixed;

bottom: -100px;

pointer-events: none;

z-index: 1;

font-family:
    "Segoe UI Symbol",
    "Noto Music",
    "Arial Unicode MS",
    sans-serif;

color: #741b39;

opacity: 0.30;

font-size: 32px;

animation: extraNotesRise 14s linear infinite;

white-space: pre;


}

.feedback-container::before {
content: "♪";


left: 11%;

animation-delay: -6s;


}

.feedback-container::after {
content: "♫";


left: 82%;

font-size: 44px;

color: #96264a;

animation-duration: 17s;

animation-delay: -11s;


}

@keyframes extraNotesRise {


0% {
    transform: translateY(0);
    opacity: 0;
}

12% {
    opacity: 0.35;
}

55% {
    opacity: 0.42;
}

100% {
    transform: translateY(-120vh);
    opacity: 0;
}


}

/* =========================================================
TABLET
========================================================= */

@media (max-width: 1100px) {


.feedback-container {
    grid-template-columns: repeat(2, minmax(260px, 1fr));

    gap: 26px;

    padding:
        80px 4vw
        90px;
}

.feedback-card {
    min-height: 490px;
}

.feedback-img {
    width: 135px;
    height: 135px;
}


}

/* =========================================================
SMALL TABLET
========================================================= */

@media (max-width: 720px) {


.feedback-container {
    grid-template-columns: 1fr;

    gap: 24px;

    padding:
        70px 20px
        80px;
}

.feedback-card {
    width: 100%;

    min-height: auto;

    padding:
        30px 24px
        35px;
}

.feedback-img {
    width: 125px;
    height: 125px;
}

.message {
    font-size: 15px;

    line-height: 1.75;
}

.note {
    opacity: 0.42;
}


}

/* =========================================================
MOBILE
========================================================= */

@media (max-width: 480px) {


.feedback-container {
    padding:
        55px 14px
        65px;
}
    .testimonials-heading {
        margin-bottom: 4px;
    }

    .heading-label {
        font-size: 11px;
        letter-spacing: 2px;
    }

    .testimonials-heading h1 {
        font-size: 29px;
    }

    .testimonials-heading p {
        font-size: 14px;
    }
.feedback-card {
    border-radius: 20px;

    padding:
        25px 18px
        30px;
}

.feedback-img {
    width: 110px;
    height: 110px;

    border-width: 3px;
}

.name {
    font-size: 21px;
}

.age {
    font-size: 12px;

    margin-bottom: 17px;
}

.message {
    font-size: 14px;

    line-height: 1.7;
}

.note {
    font-size: 26px;
}


}

/* =========================================================
VERY SMALL PHONES
========================================================= */

@media (max-width: 360px) {


.feedback-container {
    padding-left: 10px;
    padding-right: 10px;
}

.feedback-card {
    padding:
        22px 15px
        27px;
}

.feedback-img {
    width: 100px;
    height: 100px;
}

.message {
    font-size: 13.5px;
}


}

/* =========================================================
REDUCED MOTION ACCESSIBILITY
========================================================= */

@media (prefers-reduced-motion: reduce) {


.note,
.feedback-container::before,
.feedback-container::after {
    animation: none;
}

.feedback-card {
    transition: none;
}

}

/* =========================================================
PREVENT HORIZONTAL SCROLL
========================================================= */

html,
body {
overflow-x: hidden;
}